<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/25
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%--
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>$Title$</title>
  <script src="js/jquery-2.1.0.js"></script>
</head>
<body>

<form action="upload"  method="post" enctype="multipart/form-data">
  请选择图片：<input type="file"  id="bar" name="file" value="提交"><br>
  <input type="submit" value="提交">
</form>

<!--multiple  规定允许用户输入到input 元素的多个值-->
&lt;%&ndash;  <input type="file" name="" id="bar" accept="image/*" multiple="multiple"/>&ndash;%&gt;
<script type="text/javascript">
  bar.onchange = function(){
    //1.创建一个文件读取对象
    var r = new FileReader();
    //2.读取input文件框中选中的文件
    r.readAsDataURL(bar.files[0]);
    //3.将读取的结果赋值给img标签的src属性
    r.onload = function(){
      foo.src = r.result;
    }
  }
</script>

&lt;%&ndash;基于form表单上传文件&ndash;%&gt;
<img src="" id="foo" width="200px" height= "300px"/>

<h1>-----------------------------------使用ajax方法上传--------------------------</h1>
<form id="myForm"   action="upload" method="post" enctype="multipart/form-data">
  username:<input name="username" type="text">
  请选择图片：<input type="file"  id="bar1" name="file" ><br>
</form>
<button id="btnSub">ajax提交</button>

<!--multiple  规定允许用户输入到input 元素的多个值-->
&lt;%&ndash;  <input type="file" name="" id="bar" accept="image/*" multiple="multiple"/>&ndash;%&gt;

&lt;%&ndash;基于form表单上传文件&ndash;%&gt;
<img src="" id="foo1" width="200px" height= "300px"/>

<script type="text/javascript">
  bar1.onchange = function(){
    //1.创建一个文件读取对象
    var r = new FileReader();
    //2.读取input文件框中选中的文件
    r.readAsDataURL(bar1.files[0]);
    //3.将读取的结果赋值给img标签的src属性
    r.onload = function(){
      foo1.src = r.result;
    }
  }
  /**
   * 发送到upload2
   * 我们需要将表单的数据发送给后台controller
   * 需要先获取要提交的表单的所有数据
   */
  $("#btnSub").click(function () {
    //加载表单的数据
    var f1 = new FormData(document.getElementById("myForm"));
    $.ajax({
      url:'upload1',
      type:'post',
      data:f1,
      contentType:false,
      processData: false,

      success:function (data) {
        alert(data.msg);
      }
    })
  })

</script>

<h1>查询到的回显的数据的图片</h1>
<img src="https://tutu-image.oss-cn-beijing.aliyuncs.com/19c55f39-a82a-427c-9e81-25081271de06.jpg" alt="">
<h1>layui格式上传和查询</h1>
<a href="showbook.jsp">展示所有书籍信息</a>


</body>
</html>
--%>
